<script setup>
import { useRouter } from "vue-router";
import { reactive, onMounted } from "vue";
const router = useRouter();
onMounted(() => {
  My();
});
const token = localStorage.getItem("token"); // 存一份token
const My = () => {
  // 从本地获取信息
  const token = localStorage.getItem("token");
  const img = localStorage.getItem("avatar");
  const phone = localStorage.getItem("user_nickname");
  data.img = img;
  data.phone = phone;
  if (!token) {
    data.flag = 0;
  }
};
const data = reactive({
  flag: 1, // 判断条件
  img: "", // 图片
  phone: "", // 昵称
});
// 收藏事件
const sc = () => {
  const token = localStorage.getItem("token");
  if (!token) {
    router.push("/login");
  } else {
    router.push("/shoucang");
  }
};
// 判断是否跳入个人信息页面
const Geren = () => {
  console.log(1);
  if (data.flag == 1) {
    router.push("/geren");
  } else {
    return false;
  }
};
// 点击设置图标
const Shezhi = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/shezhi");
  }
};
// 是否进vip会员页面
const huiyuan = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/huiyuan");
  }
};
// 是否进优惠券页面
const moeny = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/moeny");
  }
};
// 是否跳订单页面
const ding = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/dingdan");
  }
};
// 是否跳兑换页面
const dui = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/duihuan");
  }
};
// 是否跳地址页面
const address = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/address");
  }
};
// 是否跳消息通知页面
const xiao = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/xiaoxi");
  }
};
// 是否跳问题反馈页面
const wen = () => {
  if (!token) {
    router.push("/login");
  } else {
    router.push("/wenti");
  }
};
</script>
<template>
  <div class="my">
    <div class="box">
      <!-- 设置图标 -->
      <van-icon name="setting-o" @click="Shezhi" />
      <div class="headerBox" @click="Geren">
        <img
          src="https://img2.baidu.com/it/u=3973855039,4170930478&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
          alt=""
          @click="$router.push('/login')"
          v-if="data.flag == 0"
        />
        <img
          :src="data.img"
          alt=""
          @click="$router.push('/login')"
          v-if="data.flag == 1"
        />
        <p v-if="data.flag == 0">
          <span @click="$router.push('/login')">登录</span>/<span
            @click="$router.push('/zhuce')"
            >注册</span
          >
        </p>
        <p v-if="data.flag == 1">{{ data.phone }}</p>
      </div>
    </div>
    <div class="box1">
      <ul>
        <li>
          <van-icon name="logistics" @click="ding" />
          <p class="p1">我的订单</p>
          <p class="p2">买课发快递</p>
        </li>
        <li>
          <van-icon name="ecard-pay" @click="dui" />
          <p class="p1">兑换课程</p>
          <p class="p2">兑换码兑换课程</p>
        </li>
        <li @click="address">
          <van-icon name="location-o" />

          <p class="p1">地址管理</p>
          <p class="p2">收货地址</p>
        </li>
      </ul>
      <div class="xing" @click="sc">
        <div class="div1">
          <van-icon name="star-o" />
          <span>我的收藏</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="zuan" @click="huiyuan">
        <div class="div1">
          <van-icon name="gem-o" />
          <span>我的会员</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="quan" @click="moeny">
        <div class="div1">
          <van-icon name="vip-card-o" />
          <span>我的优惠券</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="xiao" @click="xiao">
        <div class="div1">
          <van-icon name="bulb-o" />
          <span>我的消息</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="wen" @click="wen">
        <div class="div1">
          <van-icon name="records" />
          <span>问题反馈</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.my {
  width: 100%;
  .box {
    position: relative;
    width: 100%;
    height: 5.26667rem;
    background: url("https://wap.lexuemiao.com/img/user_bg.dd455109.png");
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    padding-top: 40px;
    box-sizing: border-box;
    .van-icon {
      position: absolute;
      right: 40px;
      font-size: 50px;
    }
    img {
      width: 150px;
      height: 150px;
      margin-top: 40px;
    }
    img {
      border-style: none;
      border-radius: 50%;
    }
    :deep(img) {
      width: 150px;
      height: 150px;
    }

    p {
      margin-top: 10px;
      font-size: 36px;
    }
  }
  .box1 {
    background-color: #f7f7f7;
    ul {
      display: flex;
      // align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      background: #fff;
      padding: 20px 0;

      li {
        width: 33%;
        height: 120px;
        text-align: center;
        border-left: 1px solid #ccc;
        .p1 {
          font-size: 18px;
          margin-top: 0;
        }
        .p2 {
          font-size: 25px;
          margin-top: -20px;
          color: #ccc;
        }
      }
    }
    .xing {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      background: #fff;
      margin-top: 20px;
      .div1 {
        margin-left: 20px;
      }
      span {
        font-size: 32px;
        margin-left: 20px;
      }
    }
    .zuan {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 0;
      background: #fff;
      .div1 {
        margin-left: 20px;
      }
      span {
        font-size: 32px;
        margin-left: 20px;
      }
    }
    .quan {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      background: #fff;
      .div1 {
        margin-left: 20px;
      }
      span {
        font-size: 32px;
        margin-left: 20px;
      }
    }
    .xiao {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      margin-top: 20px;
      background: #fff;
      .div1 {
        margin-left: 20px;
      }
      span {
        font-size: 32px;
        margin-left: 20px;
      }
    }
    .wen {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      background: #fff;
      .div1 {
        margin-left: 20px;
      }
      span {
        font-size: 32px;
        margin-left: 20px;
      }
    }
  }
}
</style>
